<template>
  <TopNav title="数据反馈"/>
  <div class="recovery-feedback-page">

    <!-- 患者信息区域 -->
    <div class="patient-info-section">
      <h2 class="section-title">患者信息</h2>
      <el-form :model="patientForm">
        <el-form-item label="姓名">
          <el-input v-model="patientForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手术日期">
          <el-date-picker
              v-model="patientForm.surgeryDate"
              type="date"
              placeholder="手术日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="病床号">
          <el-input v-model="patientForm.bedNumber"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 恢复数据记录区域 -->
    <div class="recovery-data-section">
      <h2 class="section-title">恢复数据记录</h2>
      <el-form :model="recoveryDataForm">
        <el-form-item label="日期">
          <el-date-picker
              v-model="recoveryDataForm.date"
              type="date"
              placeholder="记录日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="体温(℃)">
          <el-input-number v-model="recoveryDataForm.temperature" :min="-10" :max="50"></el-input-number>
        </el-form-item>
        <el-form-item label="伤口愈合情况">
          <el-select v-model="recoveryDataForm.woundHealing">
            <el-option label="良好" value="良好"></el-option>
            <el-option label="轻度感染" value="轻度感染"></el-option>
            <el-option label="未愈合" value="未愈合"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="精神状态">
          <el-select v-model="recoveryDataForm.mentalStatus">
            <el-option label="清醒" value="清醒"></el-option>
            <el-option label="嗜睡" value="嗜睡"></el-option>
            <el-option label="昏迷" value="昏迷"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="肠胃功能恢复">
          <el-select v-model="recoveryDataForm.gastrointestinalRecovery">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="轻微不适" value="轻微不适"></el-option>
            <el-option label="未恢复" value="未恢复"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button
          type="primary"
          @click="saveRecoveryData"
          :disabled="!recoveryDataForm.date ||!recoveryDataForm.temperature ||!recoveryDataForm.woundHealing ||!recoveryDataForm.mentalStatus ||!recoveryDataForm.gastrointestinalRecovery"
      >保存恢复数据</el-button>
    </div>

    <!-- 营养支持计划区域 -->
    <div class="nutrition-plan-section">
      <h2 class="section-title">营养支持计划</h2>
      <p>当前营养支持类型：<span>{{ nutritionSupportType }}</span></p>
      <p>营养补充详情：<span>{{ nutritionDetails }}</span></p>
      <el-button
          type="success"
          @click="adjustNutritionPlan"
          :disabled="!recoveryDataForm.date"
      >调整营养计划</el-button>
    </div>

    <!-- 数据图表区域 -->
    <div class="chart-section">
      <div id="chart-container" style="width: 100%; height: 350px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 患者信息表单数据
const patientForm = ref({
  name: '',
  surgeryDate: '',
  bedNumber: ''
});

// 恢复数据表单数据
const recoveryDataForm = ref({
  date: '',
  temperature: 0,
  woundHealing: '',
  mentalStatus: '',
  gastrointestinalRecovery: ''
});

// 营养支持类型
const nutritionSupportType = ref('肠内营养');
// 营养详情
const nutritionDetails = ref('高热量、高蛋白营养液，富含维生素和矿物质。');

// 保存恢复数据并调整营养计划
const saveRecoveryData = () => {
  // 这里可以根据实际情况将数据发送到后端进行存储

  // 根据恢复数据调整营养计划的简单逻辑示例
  if (recoveryDataForm.value.woundHealing === '轻度感染' && recoveryDataForm.value.mentalStatus === '嗜睡' && recoveryDataForm.value.gastrointestinalRecovery === '轻微不适') {
    nutritionSupportType.value = '肠内营养 + 补充特定营养素';
    nutritionDetails.value = '在原有营养液基础上，添加有助于伤口愈合和提升精神状态的营养素，如精氨酸、ω-3 脂肪酸等，调整配方以减轻肠胃负担。';
  } else if (recoveryDataForm.value.woundHealing === '未愈合' && recoveryDataForm.value.mentalStatus === '昏迷' && recoveryDataForm.value.gastrointestinalRecovery === '未恢复') {
    nutritionSupportType.value = '肠外营养过渡';
    nutritionDetails.value = '采用肠外营养方式，提供全面的营养支持，包括氨基酸、脂肪乳、葡萄糖、维生素和矿物质等，待肠胃功能恢复后再逐步过渡到肠内营养。';
  } else {
    ElMessage.info('恢复情况良好，营养计划暂无需调整');
  }

  // 更新图表数据
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['体温', '伤口愈合', '精神状态', '肠胃功能恢复'];
  const yAxisData = [
    recoveryDataForm.value.temperature,
    recoveryDataForm.value.woundHealing === '良好'? 1 : (recoveryDataForm.value.woundHealing === '轻度感染'? 0.5 : 0),
    recoveryDataForm.value.mentalStatus === '清醒'? 1 : (recoveryDataForm.value.mentalStatus === '嗜睡'? 0.5 : 0),
    recoveryDataForm.value.gastrointestinalRecovery === '正常'? 1 : (recoveryDataForm.value.gastrointestinalRecovery === '轻微不适'? 0.5 : 0)
  ];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 1
    },
    series: [
      {
        name: '恢复指标',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 调整营养计划
const adjustNutritionPlan = () => {
  // 这里可以添加更多调整营养计划的逻辑或与后端交互的代码
  ElMessage.success('营养计划调整成功');
};

// 页面加载时初始化图表
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['体温', '伤口愈合', '精神状态', '肠胃功能恢复'];
  const yAxisData = [0, 0, 0, 0];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 1
    },
    series: [
      {
        name: '恢复指标',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
});

// 监听恢复数据变化，更新图表
watch(recoveryDataForm, () => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['体温', '伤口愈合', '精神状态', '肠胃功能恢复'];
  const yAxisData = [
    recoveryDataForm.value.temperature,
    recoveryDataForm.value.woundHealing === '良好'? 1 : (recoveryDataForm.value.woundHealing === '轻度感染'? 0.5 : 0),
    recoveryDataForm.value.mentalStatus === '清醒'? 1 : (recoveryDataForm.value.mentalStatus === '嗜睡'? 0.5 : 0),
    recoveryDataForm.value.gastrointestinalRecovery === '正常'? 1 : (recoveryDataForm.value.gastrointestinalRecovery === '轻微不适'? 0.5 : 0)
  ];
  myChart.setOption({
    xAxis: {
      data: xAxisData
    },
    series: [
      {
        data: yAxisData
      }
    ]
  });
}, { deep: true });
</script>

<style scoped>
.recovery-feedback-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.patient-info-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.recovery-data-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.nutrition-plan-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.chart-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
</style>
